<script setup lang="ts">

// 定义事件，用于触发父组件的查询方法
const emit = defineEmits(['pageChange']);

// 注意：Props引用 的类型接口不支持外部ts文件导入，必须定义在sfc中。
interface IPage {
  current: number;
  size: number;
  total: number;
}

withDefaults(defineProps<{
  page: IPage;
  pageSizes?: any;
  small?: boolean; // 是否显示小型页码
  background?: boolean; // 是否显示背景
  layout?: string;
  pagerCount?: number; // 最多展示多少个页码按钮
  always?: boolean; // 0条时是否显示分页
}>(), {
  small: true,
  background: true,
  pageSizes: [10, 20, 50, 100],
  layout: 'total, sizes, prev, pager, next, jumper',
  pagerCount: 7,
  always: false,
});
</script>

<template>
  <el-row v-show="page.total || always" justify="end" class="mt20">
    <el-pagination v-model:current-page="page.current" v-model:page-size="page.size" :total="page.total"
      :page-sizes="pageSizes" :small="small" :background="background" :layout="layout" :pager-count="pagerCount"
      @size-change="emit('pageChange')" @current-change="emit('pageChange')" />
  </el-row>
</template>

<style scoped></style>